<template>
  <div class="right_fotter">
    <div class="top">
      <p class="wite">等待付款</p>
      <p class="price2">{{ $store.state.totalss }}</p>
    </div>
    <div class="bottom">
      <div class="bottom_left" v-for="item in $store.state.hearos4" :key="item.id">
        <img :src="item.images" />
        <p>{{ item.title }}</p>
      </div>
    </div>
    <div class="bottom_right">
      <button class="one" @click="ddd">立即付款</button>
      <button class="two" @click="cart">返回至购物车</button>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Fotter_dlog from "@/components/Fotter_dlog.vue";
export default {
  components: { Fotter_dlog },
  name: "Right_dlog",
  computed: {
    ...mapState(["hearos4"]),
  },
  methods: {
    cart() {
      this.$store.dispatch("addcart");
      // 路由跳转至购物车
      this.$router.push("/Cart");
    },
    ddd() {
      alert("抱歉，余额不足！无法支付！");
    },
  },
};
</script>
<style scoped>
.top {
  width: 100%;
  height: 90px;
  background-color: rgb(247, 238, 239);
  display: flex;
}
.top .wite {
  font-size: 20px;
  color: rgb(245, 55, 55);
  padding-top: 12px;
  padding-left: 20px;
}
.top .price1 {
  padding-top: 20px;
  font-size: 13px;
  padding-left: 515px;
}
.top .price2 {
  padding-top: 60px;
}
.bottom .bottom_left {
  /* background-color: cyan; */
  /* height: 130px; */
  width: 50%;
}
.bottom {
  display: flex;
  width: 794px;
  overflow: auto;
  height: 130px;
}
.bottom .bottom_left {
  display: flex;
  /* height: 130px; */
  width: 400px;
}
.bottom .bottom_left img {
  height: 100px;
  width: 100px;
  margin-top: 20px;
  margin-left: 20px;
}
.bottom .bottom_left p {
  height: 100%;
  font-size: 15px;
  margin-left: 10px;
  line-height: 130px;
}
.bottom_right button {
  width: 100px;
  height: 35px;
  margin-left: 270px;
  margin: 25px 140px;
}
.bottom_right .one {
  background-color: rgb(180, 135, 84);
}
.bottom .bottom_right button {
  /* 竖向弹性布局 */
  display: grid;
  width: 100px;
  height: 30px;
  margin-top: 6px;
  line-height: 30px;
}
.bottom .bottom_right button:hover {
  background-color: orangered;
  border: none;
}
</style>